<template>
  <div class="about">
    <h1>用户登录</h1>
    <div>
      用户名：<input type="text" v-model="userForm.username" ><br>
      密码：<input type="text" v-model="userForm.password"><br>
      验证码：<input type="code" v-model="userForm.code"><br>
      <img :src="codeUrl">
      <br>
      <button @click="login">登录</button>
    </div>
  </div>
</template>
<script>
import axios from 'axios';

import { v4 as uuidv4 } from 'uuid'

export default {
  name: 'loginView',
  data () {
    return {
      codeUrl: '',
      userForm: {
        username: '',
        password: '',
        code: '',
        codeKey: ''
      }
    }
  },
  created () {
    // 生成uuid
    this.userForm.codeKey = uuidv4()
    //  获取图片
    // eslint-disable-next-line no-irregular-whitespace
    this.codeUrl = axios.defaults.baseURL +　'/user/getCode.png?codeKey=' + this.userForm.codeKey
    alert(this.codeUrl);
  },
  methods: {
    login () {
      axios.post('/login?username=' + this.userForm.username + '&password=' + this.userForm.password).then(res => {
        if (res.data.code === 200) {
          this.$store.commit('setToken', res.data.jdata.token)
          this.$store.commit('setUserInfo', res.data.jdata.userInfo)
          
          alert('登录成')
          this.$router.push('/account')
        } else {
          alert('登录失败')
        }
      })
    }
  }

}

</script>
